<template>
   <div class="app-content">
    <el-row class="row" :gutter="5">
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4" ><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4"><div class="grid-content bg-purple"></div></el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="4"><div class="grid-content bg-purple-light"></div></el-col>
  </el-row>
   </div>
</template>

<script>

export default {

  data () {
    return {

    }
  },
  methods: {

  }
}
</script>
<style lang="scss" scoped>
.row{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
  .bg-purple {
    background: #0f6ad3;
  }
  .bg-purple-light {
    background: #df791b;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    margin: 2px 0;
  }
</style>
